import React, { Component } from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import { Text, TouchableOpacity, View, StyleSheet, Alert, Image, ActivityIndicator } from 'react-native';
import { Icon, List, ListItem, Button, FormInput, CheckBox } from 'react-native-elements';
import Loader from './widgets/Loader';
import NavNext from './widgets/NavNext';
import RefreshScrollView from './widgets/RefreshScrollView';
import FactoryMessageButton from './components/FactoryMessageButton';
import { clearStorage } from './clientStorage';
import { NavigationActions } from 'react-navigation';
import { executor, primaryColor, toast, uploadImage } from './utils';
import ImagePicker from 'react-native-image-crop-picker';

const styles = StyleSheet.create({
  container: {
    padding: 16
  },
  marginTop: {
    marginVertical: 16
  },
  right: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  spaceBetween: {
    marginTop: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  image: {
    width: 70,
    height: 70
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 16
  }
});

class ContactCustomerPage extends Component {
  static navigationOptions = ({screenProps, navigation}) => {
    return {
      title: `${screenProps.chinese?'订单':'Order'} #${navigation.state.params.displayId}`,
      headerRight: (
        <FactoryMessageButton chinese={screenProps.chinese} navigation={navigation}/>
      )
    };
  }
  onAttachment = () => {
    ImagePicker.openCamera({width: 400,
      height: 400, cropping: true })
      .then(({path}) => {
        if (!path) return;
        const attachments = this.props.navigation.state.params.attachments||[];
        const index = attachments.indexOf(path);
        if (index < 0) {
          this.props.navigation.setParams({attachments:[...attachments, path]});
        }
      });
  }
  onSelectNote = (remark) => {
    const selectNotes = this.props.navigation.state.params.selectNotes||[];
    const index = selectNotes.findIndex(item=>item.id===remark.id);
    if (index >= 0) {
      this.props.navigation.setParams({selectNotes:[...selectNotes.slice(0,index), ...selectNotes.slice(index+1)]});
    } else {
      this.props.navigation.setParams({selectNotes:[...selectNotes, remark]});
    }
  }
  render() {
    if (this.props.loading) return <Loader/>;
    const { selectNotes, attachments } = this.props.navigation.state.params;

    return (
      <RefreshScrollView refetch={this.props.refetch}>
        <List>
          {this.props.remarks&&this.props.remarks.map((remark, index) => {
            const select = (selectNotes&&selectNotes.findIndex(item=>item.id===remark.id)>=0);
            return <ListItem key={index} titleNumberOfLines={2} title={remark.description} onPress={()=>this.onSelectNote(remark)}
              rightIcon={{name: select?'check-box':'check-box-outline-blank', color: select?primaryColor:null}}/>;
          })}
        </List>
        <View style={styles.row}>
          {attachments&&attachments.map((uri, index) =>
            <TouchableOpacity key={index} onPress={()=>this.props.navigation.setParams({attachments:[...attachments.slice(0,index), ...attachments.slice(index+1)]})}>
              <View style={styles.container}>
                <Text>{index+1}. photo added</Text>
                <Image style={styles.image} source={{uri}}/>
              </View>
            </TouchableOpacity>
          )}
        </View>
        <Button containerViewStyle={styles.marginTop} color='black' title='Add Attachment'
          backgroundColor='white' onPress={this.onAttachment}/>
      </RefreshScrollView>
    );
  }
}

export default compose(
  graphql(gql`
    query ContactCustomerPage {
      remarks(type:"factory") {
        id
        description
        sendDescription:description(chinese:false)
      }
    }
  `, {
    props: ({data:{remarks, loading, refetch}}) => {
      return {
        refetch,
        remarks,
        loading
      };
    }
  })
)(ContactCustomerPage);

